<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/lunbo.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/card.css">
    <link rel="stylesheet" href="css/global.css">
    <script src="js/jquery.min.js"></script>
    <title>Document</title>

    <style>
        body {
            background-color: #e2eaec;
        }


        #main {
            margin: 40px auto;
            width: 95%;
            background-color: #ffffff;
            padding: 16px;
        }
    </style>
</head>

<body>

    <!-- head部分：登录和注册功能

content部分：搜索框（search）

​ 内容主体main部分（左边一系列链接）(hrefs)，中间使用js实现轮播图（lunbo），右边登录提示框（login） -->

    <div id="head" class="clear">
        <a href="login.html">登录</a>
        <a href="">注册</a>
        <a href="">手机逛淘宝</a>
        <a href="">网页无障碍</a>

    </div>

    <div id="content">
        <div id="search" class="clear">
            <img src="imgs/logo.png" alt="logo" width="80px" height="80px">
            <div id="search2">
                <input type="text" placeholder="请输入需要查找的商品">
                <button>搜索</button>
            </div>
            <img src="imgs/download.png" alt="下载网购" width="80px" height="80px">
        </div>

        <div id="main" class="clear" style="border-bottom: 1px solid #f8f9fb">

            <div class="clear">
                <div id="hrefs">

                    <span style="font-size: 18px; font-weight: bold;">分类</span>
                    <li class="href">
                        <a href="">女装</a><span>/</span>
                        <a href="">女装</a><span>/</span><a href="">女装</a>
                    </li>

                    <li class="href">
                        <a href="">女装</a><span>/</span>
                        <a href="">女装</a><span>/</span><a href="">女装</a>
                    </li>
                    <li class="href">
                        <a href="">女装</a><span>/</span>
                        <a href="">女装</a><span>/</span><a href="">女装</a>
                    </li>
                    <li class="href">
                        <a href="">女装</a><span>/</span>
                        <a href="">女装</a><span>/</span><a href="">女装</a>
                    </li>
                    <li class="href">
                        <a href="">女装</a><span>/</span>
                        <a href="">女装</a><span>/</span><a href="">女装</a>
                    </li>
                    <li class="href">
                        <a href="">女装</a><span>/</span>
                        <a href="">女装</a><span>/</span><a href="">女装</a>
                    </li>
                </div>

                <div id="lunbo" class="clear">

                    <img src="imgs/lunbo_1.png" alt="轮播图片">

                    <!-- 左右箭头 -->

                    <div id="toggle" class="clear">
                        <span id="l">&lt;</span><span id="r">&gt;</span>
                    </div>

                    <div id="circles">
                        <span count="1" class="click">o</span>
                        <span count="2">o</span>
                        <span count="3">o</span>
                        <span count="4">o</span>
                        <span count="5">o</span>
                    </div>

                </div>

                <div id="login" class="clear">
                    <img src="imgs/taobao_head.png" alt="头像">
                    <div id="check_login">hi，你好</div>
                    <div id="lr">
                        <button onclick="location.href='login.html'">登录</button>
                        <button>注册</button>
                        <button>开店</button>
                    </div>

                    <div id="choices" class="clear">
                        <div class="choice">
                            <img src="imgs/login_tubiao.png" alt="" width="20px" height="20px">
                            <div id="choice_content"><a href="">宝贝收藏</a></div>
                        </div>
                        <div class="choice">
                            <img src="imgs/login_tubiao.png" alt="" width="20px" height="20px">
                            <div id="choice_content"><a href="">宝贝收藏</a></div>
                        </div>
                        <div class="choice">
                            <img src="imgs/login_tubiao.png" alt="" width="20px" height="20px">
                            <div id="choice_content"><a href="">宝贝收藏</a></div>
                        </div>
                        <div class="choice">
                            <img src="imgs/login_tubiao.png" alt="" width="20px" height="20px">
                            <div id="choice_content"><a href="">宝贝收藏</a></div>
                        </div>
                    </div>
                </div>
            </div>


            <div id="main_content">
                <div id="title">
                    <span>猜你喜欢</span>
                    <span>个性化推荐</span>
                </div>

                <div id="show">
                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>

                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>

                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>

                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>

                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>

                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>

                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>

                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>

                    <div class="card">
                        <img src="imgs/good.png" alt="" width="80px" height="80px">
                        <div><a href="">长裤长裤长裤长裤长裤长裤长裤长裤长裤长裤</a></div>

                        <div id="feature">
                            <span>免运费险</span><span>免运费险</span>
                        </div>

                        <div id="price">
                            ￥1000
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <script>
        //在鼠标停留在hrefs div里面的链接上面时，所在的行的链接的添加颜色和下划线
        $("#hrefs li a").hover(function () {
            var li = $(this).parent("li");
            $(li).find("a").toggleClass("hover");
            $(li).find("span").toggleClass("hover");
        });

        //控制轮播图效果，点击左右箭头切换图片
        current = 1;
        last = 1;
        total = 5;

        //左移动箭头
        function leftMove() {

            //先将原有样式click的span删除
            $("#lunbo #circles span").eq(last - 1).removeClass("click");
            var img = $("#lunbo img");
            //改变图像的src属性
            current = parseInt(current);
            current = current - 1;
            if (current == 0) current = total;
            last = current;
            $("#lunbo #circles span").eq(current - 1).addClass("click");
            $(img).attr("src", "imgs/lunbo_" + (current) + ".png");
        }

        //右移动箭头
        function rightMove() {
            //先将原有样式click的span删除
            $("#lunbo #circles span").eq(last - 1).removeClass("click");
            var img = $("#lunbo img");
            //改变图像的src属性
            current = parseInt(current);
            current = current + 1;
            if (current == total + 1) current = 1;
            last = current;
            $("#lunbo #circles span").eq(current - 1).addClass("click");
            $(img).attr("src", "imgs/lunbo_" + (current) + ".png");
        }

        //每隔1秒种向右移动图像
        var move = setInterval(rightMove, 1000);

        //当鼠标移动到图片上方时，显示两个箭头,同时清除每隔一秒切换图片
        $("#lunbo img").hover(function () {
            // visibility: visible
            $("#lunbo #toggle span").css("visibility", "visible")
            clearInterval(move);
        }, function () {
            $("#lunbo #toggle span").css("visibility", "hidden")
            move = setInterval(rightMove, 1000);
        })

        $("#lunbo #toggle span").hover(function () {
            clearInterval(move);
            $("#lunbo #toggle span").css("visibility", "visible")
        }, function () {
            $("#lunbo #toggle span").css("visibility", "hidden")
            move = setInterval(rightMove, 1000);
        })

        $("#lunbo #toggle #l").click(leftMove);
        $("#lunbo #toggle #r").click(rightMove);
        //点击小圆圈，实现切换图片
        $("#lunbo #circles span").click(function () {
            //先将原有样式click的span删除,获取所有的span
            $("#lunbo #circles span").eq(last - 1).removeClass("click");
            $(this).addClass("click");
            current = $(this).attr("count");
            last = current;
            $("#lunbo img").attr("src", "imgs/lunbo_" + current + ".png");
        })


    </script>

</body>


</html>